import {Context, ContextProvider3, useCount} from './components/ContextProvider3'


function MyComponent() {
  let {state, add, reduce} = useCount()
  return (
    <div>
      <h2>{state}</h2>
      <button onClick={() => {add(1)}}>add</button>
      <button onClick={() => {reduce(10)}}>reduce</button>
    </div>
  
  )
}

function MyComponent2() {
  let {state, add, reduce} = useCount()
  return (
    <div>
      <hr/>
      <h2>{state}</h2>
      <button onClick={() => {add(1)}}>add</button>
      <button onClick={() => {reduce(10)}}>reduce</button>
    </div>
  
  )
}

function App() {
  return (
    <div className="App">
      <ContextProvider3>
        <MyComponent></MyComponent>
        <MyComponent2></MyComponent2>
      </ContextProvider3>
    </div>
  );
}

export default App;
